<template>
    <view>
        <u-navbar title="我的收藏">
            <view slot="right" class="navbar-btn" @click="clickOperationBtn">{{
                showCheckAll ? "取消" : "管理"
            }}</view>
        </u-navbar>
        <view class="collection-wrap">
            <view class="tabs-box">
                <u-tabs
                    :list="tabs"
                    :is-scroll="false"
                    :current="swiperCurrent"
                    :activeColor="globPrimaryColor"
                    @change="change"
                ></u-tabs>
            </view>
            <swiper
                :style="{ height: mescrollHeight }"
                :current="swiperCurrent"
                @change="swiperChange"
            >
                <swiper-item
                    class="swiper-item"
                    v-for="(page, index) in tabs"
                    :key="index"
                >
                    <collectionItem
                        :i="index"
                        :index="swiperCurrent"
                        :tabs="tabs"
                        :isChecked="showCheckAll"
                        :value="page.val"
                    ></collectionItem>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script>
import collectionItem from "./components/collection-item.vue";
import { mapGetters } from "vuex";
export default {
    components: { collectionItem },
    data() {
        return {
            tabs: [
                {
                    name: "点播",
                    val: "video",
                },
                {
                    name: "直播",
                    val: "live",
                },
                {
                    name: "班级",
                    val: "classes",
                },
            ],
            swiperCurrent: 0,
            dx: 0,
            showCheckAll: false,
        };
    },
    computed: {
        ...mapGetters({
            globPrimary: "designSetting/getGlobTheme",
            globPrimaryColor: "designSetting/getGlobThemeColor",
            globNavbarHeight: "projectSetting/globNavbarHeight",
            globStatusBarHeight: "projectSetting/globStatusBarHeight",
        }),
        globWindowHeight() {
            return this.$u.sys().windowHeight;
        },
        mescrollHeight() {
            let height =
                this.globWindowHeight -
                this.globNavbarHeight -
                this.globStatusBarHeight;
            return `${height}px`;
        },
    },
    options: { styleIsolation: "shared" },
    methods: {
        // tab栏切换
        change(index) {
            this.swiperCurrent = index;
        },
        swiperChange(e) {
            this.swiperCurrent = e.detail.current;
        },
        // 头部管理收藏按钮
        clickOperationBtn() {
            this.showCheckAll = !this.showCheckAll;
        },
    },
};
</script>

<style lang="scss" scoped>
.navbar-btn {
    font-size: 30rpx;
    font-weight: 400;
    color: $edu-main-color;
    margin-right: 30rpx;
}
.collection-wrap {
    background-color: #fff;
    .tabs-box {
        position: fixed;
        left: 0;
        right: 0;
        top: calc(44px + var(--top-window-height));
        z-index: 99;
    }
}
</style>
